<template>
  <div :class="className"
    :style="{ height: height, width: width }" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

const animationDuration = 3000

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '320px'
    },
    valueList: {
      type: Array

    },
    dataInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      //  this.sleep(3)
      //console.log(this.valueList)
      const $this = this;
      // setTimeout(function () {
      //   // 时间间隔

      // }, 4000);
      $this.initChart()
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        title: {
          text: ''
        },
        color: ['#839890', '#AFBDB2', '#56A3F1', '#FF917C'],
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return `<div> <span style="display: inline-block;width: 110px">最近一次消费得分(R):</span> ${params.value[0]}</div>
                    <div> <span style="display: inline-block;width: 110px">消费频率得分(M):</span>${params.value[1]}</div>
                    <div> <span style="display: inline-block;width: 110px">消费金额得分(F):</span>${params.value[2]}</div>`
          }
        },
        legend: {
          data: ['Allocated Budget', 'Actual Spending']
        },
        radar: {
          // shape: 'circle',
          center: ['50%', '62%'],
          radius: '90%',
          indicator: [
            { name: `最近一次消费(R) \n\n 最近消费时间${this.dataInfo.rnumber || ''}`, max: 5 },
            { name: `消费频率/年(F) \n\n 消费次数${this.dataInfo.fnumber || '0'}  `, max: 5 },
            { name: `消费金额/年(M) \n\n 消费金额${this.dataInfo.mnumber || '0'}`, max: 5 }
          ]
        },
        series: [
          {
            tooltip: {
              trigger: 'item'
            },
            name: 'RMF模型',
            type: 'radar',
            data: [
              {
                value: this.valueList,
                name: ''
              }
            ]
          }
        ]
      })
    }
  }
}
</script>
